<template>
  <div class="container">
    <Breadcrumb :items="['menu.property', '资产详情']" />
    <a-space direction="vertical" :size="16" fill>
      <a-card class="general-card">
        <ProfileItem :loading="preLoading" type="pre" :render-data="preData" />
      </a-card>
      <div class="enterprise-version">
        <a-table
          :columns="columns"
          :data="form.noData ? [] : data"
          :bordered="form.border"
          :hoverable="form.hover"
          :stripe="form.stripe"
          :loading="form.loading"
          :show-header="form.tableHeader"
          :row-selection="form.checkbox ? rowSelection : undefined"
        >
          <template #columns>
            <a-table-column title="版本号" data-index="key" />
            <a-table-column title="文件名" data-index="name" />
            <a-table-column title="文件大小" data-index="otherName" />
            <a-table-column title="上传人" data-index="sort" />
            <a-table-column title="上传时间" data-index="status" />
            <a-table-column title="操作">
              <template #cell>
                <a-space>
                  <a-button type="primary">下载</a-button>
                </a-space>
              </template>
            </a-table-column>
          </template>
        </a-table>
      </div>
      <div class="enterprise-detail">
        <div>
          <ContentPublishRatio />
        </div>
      </div>

      <!-- <a-card class="general-card">
        <ProfileItem :loading="loading" :render-data="currentData" />
      </a-card> -->

      <OperationLog />
    </a-space>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue"
import useLoading from "@/hooks/loading"
import { queryProfileBasic, ProfileBasicRes } from "@/api/profile"
import ProfileItem from "./components/profile-item.vue"
import OperationLog from "./components/operation-log.vue"
import ContentPublishRatio from "./components/content-publish-ratio.vue"
// import useThemes from "@/hooks/themes"
// import ChainItem from "./components/chain-item.vue"

// const { isDark } = useThemes()

// const { loading } = useLoading(true)
const { loading: preLoading, setLoading: preSetLoading } = useLoading(true)
// const currentData = ref<ProfileBasicRes>({} as ProfileBasicRes)
const preData = ref<ProfileBasicRes>({} as ProfileBasicRes)
// const step = ref(1)
// const fetchCurrentData = async () => {
//   try {
//     const { data } = await queryProfileBasic()
//     currentData.value = data
//     step.value = 2
//   } catch (err) {
//     // you can report use errorHandler or other
//   } finally {
//     setLoading(false)
//   }
// }
const fetchPreData = async () => {
  try {
    const { data } = await queryProfileBasic()
    preData.value = data
  } catch (err) {
    // you can report use errorHandler or other
  } finally {
    preSetLoading(false)
  }
}
// fetchCurrentData()
fetchPreData()

const form = reactive({
  border: true,
  borderCell: false,
  hover: true,
  stripe: true,
  checkbox: true,
  loading: false,
  tableHeader: true,
  noData: false
})
const columns = [
  {
    title: "序号",
    dataIndex: "key"
  },
  {
    title: "企业名称",
    dataIndex: "name"
  },
  {
    title: "统一信用代码",
    dataIndex: "otherName"
  },
  {
    title: "标签",
    dataIndex: "sort"
  },
  {
    title: "行业",
    dataIndex: "status"
  },
  {
    title: "支撑单位",
    dataIndex: "time"
  },
  {
    title: "操作",
    dataIndex: "email"
  }
]

const data = [
  {
    key: "1",
    name: "Jane Doe",
    otherName: "J.D.",
    sort: 23000,
    status: "启用",
    time: "2021-01-01 12:00:00",
    email: "jane.doe@example.com"
  },
  {
    key: "2",
    name: "Jane Doe",
    otherName: "J.D.",
    sort: 23000,
    status: "启用",
    time: "2021-01-01 12:00:00",
    email: "jane.doe@example.com"
  },
  {
    key: "3",
    name: "Jane Doe",
    otherName: "J.D.",
    sort: 23000,
    status: "启用",
    time: "2021-01-01 12:00:00",
    email: "jane.doe@example.com"
  },
  {
    key: "4",
    name: "Jane Doe",
    otherName: "J.D.",
    sort: 23000,
    status: "启用",
    time: "2021-01-01 12:00:00",
    email: "jane.doe@example.com"
  },
  {
    key: "5",
    name: "Jane Doe",
    otherName: "J.D.",
    sort: 23000,
    status: "启用",
    time: "2021-01-01 12:00:00",
    email: "jane.doe@example.com"
  }
]
</script>

<script lang="ts">
export default {
  name: "Basic"
}
</script>

<style scoped lang="less">
.container {
  padding: 0 20px 20px 20px;
}
.enterprise-detail {
  background-color: #fff;
  padding: 10px 20px 20px 20px;
}
.steps {
  max-width: 548px;
  margin: 0 auto 10px;
}
</style>
